
<template>
    <view>
        <image style="width: 100%;" src="../../static/common/lgbg.png" mode="widthFix"></image>
        <view class="head">
            <view style="padding: 50rpx;">
                <u-text text="注册" size="30" color="#2469f6" bold></u-text>
                <view style="margin-top: 60rpx;">
                    <u-input prefixIcon="account" placeholder="请输入账号..." color="#2469f6" border="none"
                        v-model="register.username" clearable
                        customStyle="height:90rpx;background:#eaf2fe;border-radius:25rpx;padding-left:15rpx;padding-right:15rpx;"
                        placeholderStyle="color:#949494" prefixIconStyle="color:#2469f6" fontSize="18"></u-input>
                </view>
                <view style="margin-top: 60rpx;">
                    <u-input prefixIcon="lock" placeholder="请输入密码..." color="#2469f6" border="none"
                        v-model="register.password" password clearable placeholderStyle="color:#949494"
                        customStyle="height:90rpx;background:#eaf2fe;border-radius:25rpx;padding-left:15rpx;padding-right:15rpx;"
                        prefixIconStyle="color:#2469f6" fontSize="18"></u-input>
                </view>
                <view style="margin-top: 60rpx;">
                    <u-input prefixIcon="lock" placeholder="请再次输入密码..." color="#2469f6" border="none"
                        v-model="password2" password clearable placeholderStyle="color:#949494"
                        customStyle="height:90rpx;background:#eaf2fe;border-radius:25rpx;padding-left:15rpx;padding-right:15rpx;"
                        prefixIconStyle="color:#2469f6" fontSize="18"></u-input>
                </view>
                <view style="margin-top: 60rpx;">
                    <u-input prefixIcon="email" placeholder="请输入邮箱地址..." v-model="register.useremail" color="#2469f6"
                        border="none"
                        customStyle="height:90rpx;background:#eaf2fe;border-radius:25rpx;padding-left:15rpx;padding-right:15rpx;"
                        prefixIconStyle="color:#2469f6" fontSize="18">
                        <template slot="suffix">
                			         <u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取哈哈哈"></u-code>
                            <u-button @tap="getCode" :text="tips" type="success" size="normal"></u-button>
                        </template>
                    </u-input>
                </view>
                <view style="margin-top: 60rpx;">
                    <u-input prefixIcon="fingerprint" placeholder="请输入验证码..." color="#2469f6" border="none"
                        v-model="register.code" clearable
                 		     customStyle="height:90rpx;background:#eaf2fe;border-radius:25rpx;padding-left:15rpx;padding-right:15rpx;"
                      		placeholderStyle="color:#949494" prefixIconStyle="color:#2469f6" fontSize="18"></u-input>
                </view>
                <view style="margin-top: 60rpx;">
                    <u-button size="large" text="立即注册" color="#2469f6" iconColor="#fff"
                        customStyle="height:90rpx;border-radius:25rpx;" @click="Register()">
                    </u-button>
                </view>
				<view style="margin-top: 50rpx;">
					<u-checkbox-group>
						<u-checkbox v-model="isyes" name="login" :disabled="false" @change="checkboxChange">
						</u-checkbox> 我已阅读同意<view style="color: blue;" @click="Goxy">《服务协议》</view>和<view style="color: blue;" @click="Goys">《隐私政策》</view>
					</u-checkbox-group>
				</view>
            </view>
        </view>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>
<script>
    import API from '../../util/request.js';
    export default {
        data() {
            return {
                tips: '',
                password2: '',
                register: {
                    username: '', //账号
                    password: '',
                    useremail: '',
                    code: ''
                },
				isyes:false
            }
        },
        onLoad() {},
        methods: {
			checkboxChange(e) {
				this.isyes=e;
			},
			Goys() {
				uni.navigateTo({
					url: `/pages/commen/webview?url=https://tool.freeapks.cn/tk/yszc.html`
				})
			},
			Goxy() {
				uni.navigateTo({
					url: `/pages/commen/webview?url=https://tool.freeapks.cn/tk/fwxy.html`
				})
			},
            codeChange(text) {
                this.tips = text;
            },
            getCode() {
                if (this.register.useremail == '') {
                    this.$refs.uToast.show({
                    	type: 'error',
                    	message: '请输入邮箱地址！',
                        position: "bottom",
                    })
                }else{
                    if (this.$refs.uCode.canGetCode) {
                        // 模拟向后端请求验证码
                        uni.showLoading({
                            title: '正在获取验证码'
                        })
                        uni.request({
                            url: API.GetRegCode() + this.register.useremail,
                            success: (res) => {
								var data = JSON.parse(this.AES.decrypt(res.data, API.JmKey(), API.JmIv()));
								console.log(data)
                                if (data.code == 200) {
                                    setTimeout(() => {
                                        uni.hideLoading();
                                        // 这里此提示会被this.start()方法中的提示覆盖
                                        uni.$u.toast('验证码已发送');
                                      	 // 通知验证码组件内部开始倒计时
                                        this.$refs.uCode.start();
                                    }, 2000);
                                } else {
                                    setTimeout(() => {
                                        uni.hideLoading();
                                        // 这里此提示会被this.start()方法中的提示覆盖
                                        uni.$u.toast(data.msf);
                                    }, 2000);
                                }
                            }
                        })
                    
                    } else {
                        uni.$u.toast('倒计时结束后再发送');
                      }
                }
               	
            },
            change(e) {
                console.log('change', e);
            },
            Register: function() {
                if(this.isyes==false){
					this.$refs.uToast.show({
						type: 'error',
						message: '请阅读并勾选同意协议条款!',
					    position: "bottom",
					})
				}else{
					if (this.register.username == '') {
					    this.$refs.uToast.show({
					    	type: 'error',
					    	message: '请输入用户名！',
					        position: "bottom",
					    })
					   
					} else if (this.register.password == '') {
					    this.$refs.uToast.show({
					    	type: 'error',
					    	message: '请输入密码！',
					        position: "bottom",
					    })
					} else if (this.register.password != this.password2) {;
					    this.$refs.uToast.show({
					    	type: 'error',
					    	message: '两次密码不相同！',
					        position: "bottom",
					    })
					} else if (this.register.useremail == '') {
					    this.$refs.uToast.show({
					    	type: 'error',
					    	message: '请输入邮箱地址！',
					        position: "bottom",
					    })
					} else if (this.register.code == '') {
					    this.$refs.uToast.show({
					    	type: 'error',
					    	message: '请输入验证码！',
					        position: "bottom",
					    })
					} else {
					    uni.showLoading({
					        title: '正在注册...'
					    })
					    uni.request({
					        url: API.Register() + this.register.username + '&password=' + this.register
					            .password + '&useremail=' + this.register.useremail + '&code=' + this.register.code,
					        success: (res) => {
								console.log(res)
								var data = JSON.parse(this.AES.decrypt(res.data, API.JmKey(), API.JmIv()));
					            console.log(data)
					            if(data.code==200){
					                uni.hideLoading();
					                this.$refs.uToast.show({
					                	type: 'success',
					                	message: data.msf,
					                    position: "bottom",
					                	complete() {
					                		uni.navigateTo({
					                		    url:'/pages/account/login'
					                		})
					                	}
					                })
					            }else{
					                uni.hideLoading();
					                this.$refs.uToast.show({
					                	type: 'error',
					                	message: data.msf,
					                    position: "bottom",
					                })
					            }
					        }
					    })
					}
				}

            },

        }
    }
</script>
<style>
    page {
        background-color: #fff;
    }

    .head {
        /* padding: 50rpx; */
        width: 100%;
        background-color: #fff;
        position: absolute;
        border-radius: 60rpx 60rpx 0 0;
        margin-top: -110rpx;

    }
</style>
